互動視覺化

郭耀仁

概念

讓圖形與資料互動

  • 改變圖形中的元素
  • 連結多個圖形
  • 與瀏覽者製造更深的連結

常見互動的圖形元素

  • 對資料做篩選(filter)
  • 對度量做更動(scaling)
  • 資料提示(annotations)

對資料做篩選(filter)

對度量做更動(scaling)

資料提示(annotations)

工具

R 語言使用者

網頁工程師(撰寫 JavaScript)

Plotly

Plotly for R is an interactive, browser-based charting library built on the open source javascript graphing library, plotly.js. It works entirely locally, through the HTML widgets framework.

https://images.plot.ly/plotly-documentation/images/r_cheat_sheet.pdf

新手的 Plotly

# install.packages("plotly")
library(plotly) # Load package
library(gapminder) # Load data
library(dplyr)

gapminder_2007 <- gapminder %>%
  filter(year == 2007)
p <- plot_ly(data = gapminder_2007, x = ~gdpPercap, y = ~lifeExp) # Save plot as p
p # Display plot

基礎的 plotly 函數

  • plot_ly()
  • plot_geo()
  • layout()
  • add_trace()
  • style()

可以這樣做函數呼叫:

p <- plot_ly(...) %>%
  add_trace(...) %>%
  add_layout(...) # Save plot as p
p # Display plot

Shiny

Shiny is an R package that makes it easy to build interactive web apps straight from R. You can host standalone apps on a webpage or embed them in R Markdown documents or build dashboards. You can also extend your Shiny apps with CSS themes, htmlwidgets, and JavaScript actions.

註冊一個 shinyapps 帳號

連結帳號與 RStudio

  • Account
  • Tokens
  • show
  • Copy to clipboard

基本架構

  • Your Shiny App Name
  • ui.R
  • server.R

ui.R

library(shiny)

shinyUI(
  fluidPage(
    titlePanel("My First Shiny App"),
      sidebarLayout(
        sidebarPanel(
          checkboxGroupInput("continents",
                             "Select continents:",
                             c("Asia" = "Asia",
                               "Europe" = "Europe",
                               "Africa" = "Africa",
                               "Americas" = "Americas",
                               "Oceania" = "Oceania"),
                             selected = c("Asia", "Europe", "Africa", "Americas", "Oceania")
                             )
          ),
        mainPanel(
          plotOutput("scatterPlot")
          )
        )
    )
  )

server.R

library(shiny)
library(dplyr)
library(gapminder)
library(ggplot2)

# Define server logic required to draw a histogram
shinyServer(function(input, output) {
  output$scatterPlot <- renderPlot({
    selected_continents <- input$continents
    gapminder_plot <- gapminder %>%
      filter(year == 2007) %>%
      filter(continent %in% selected_continents)
    ggplot(gapminder_plot, aes(x = gdpPercap, y = lifeExp, colour = continent, size = pop)) +
      geom_point()
  })
})

讓篩選變得更流暢

  • 針對 input$ 變數使用 reactive() 函數

加入 year 的 slider

發佈 Shiny App 並且分享你的連結